<template>
  <div id="app">
    <div class="transition-box"
         tag="router-view">
      <transition :name="transitionName">
        <keep-alive include="home">
          <router-view class="Router" />
        </keep-alive>
      </transition>
    </div>
    <div class="bottom-tabbar"
         v-if="$route.meta.isTabbar">
      <van-tabbar v-model="active"
                  active-color="#E93323"
                  inactive-color="#626262">
        <van-tabbar-item v-for="item in tabbarData"
                         :key="item.path"
                         :to="item.path"
                         :badge="item.path == '/cart' ? count : ''">
          {{item.title}}
          <template #icon="props">
            <img :src="props.active ? item.iconActive : item.icon" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      active: 0,
      transitionName: '', // 初始过渡方向
      tabbarData: [
        {
          title: '首页',
          path: '/home',
          icon: require('@/assets/image/home/home.png'),
          iconActive: require('@/assets/image/home/home_active.png')
        },
        {
          title: '分类',
          path: '/class',
          icon: require('@/assets/image/home/class.png'),
          iconActive: require('@/assets/image/home/class_active.png')
        },
        {
          title: '购物车',
          path: '/cart',
          icon: require('@/assets/image/home/cart.png'),
          iconActive: require('@/assets/image/home/cart_active.png')
        },
        {
          title: '我的',
          path: '/user',
          icon: require('@/assets/image/home/user.png'),
          iconActive: require('@/assets/image/home/user_active.png')
        },
      ]
    }
  },
  watch: {
    '$route' (to, from) {
      if ((!to.meta.isTabbar || !from.meta.isTabbar) && from.name != null) {
        let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
        if (isBack) {
          this.transitionName = 'slide-left';
        } else {
          this.transitionName = 'slide-right';
        }
      } else {
        this.transitionName = ''
      }
      this.$router.isBack = false
      if (to.meta.isTabbar) {
        this.active = to.meta.index
      }
    }
  },
  computed: {
    ...mapState({
      count: state => state.cartCount,
    }),
  },
  created () {
    this.cartAdd(6)
  },
  mounted () {
    /**
     * apicloud api模块使用demo
     * */

    /*
        // 1. 引入模块
        trans = window.api.require('trans')

        // 2. 模块函数调用
         trans.saveImage({
                base64Str:  base64StrArr[1],
                imgPath:"fs://img/",
                album:true,
                imgName:"code.png"
            }, function(ret, err) {
                if (ret.status) {
                    //3. 调用原生api模块
                    window.api.toast({
                        msg: 'xxxx'
                    })

                } else {
                    console.log(JSON.stringify(err));
                }
            });
    */
  },
  methods: {
    ...mapMutations(['cartAdd']),
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.transition-box {
  width: 100%;
  flex: 1;
  overflow: auto;
}
.Router {
  transition: all 0.377s ease;
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000;
}
// 路由切换动画
.slide-left-enter,
.slide-right-leave-active {
  transform: translate3d(-100%, 0, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
}

.slide-left-leave-active,
.slide-right-enter {
  transform: translate3d(100%, 0, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
}
.bottom-tabbar {
  height: 1rem;
  width: 100%;
  .van-tabbar {
    height: 100%;
    position: relative;
  }
  .van-tabbar-item__text {
    transform: scale(0.84);
    font-size: 0.24rem;
  }
}
</style>
